<template>
    <div class="">
        <Header></Header>
        <div class="main">
            <div class="body">
                <div class="body_title">Быстрый запрос</div>
                <div class="body_name ">
                    <div class="body_name_title mTop30">Название продукта</div>
                    <el-input v-model="name" class="body_name_input mTop20" placeholder="Please input" />
                </div>
                <div class="body_name">
                    <div class="body_name_title mTop30">Классификация продуктов </div>
                    <div class="items mTop20">
                        <el-select v-model="select_value" placeholder="Пожалуйста, выберите способ доставки."
                            size="large" class="body_name_select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-select v-model="select_value" placeholder="Пожалуйста, выберите способ доставки."
                            size="large" class="body_name_select mLeft20">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>
                <div class="body_name ">
                    <div class="body_name_title mTop30">Прогнозируемый объем</div>
                    <el-input v-model="name" class="body_name_input mTop20" placeholder="Please input" />
                </div>
                <div class="body_name ">
                    <div class="body_name_title mTop30">Контактная информация</div>
                    <el-input v-model="name" class="body_name_input mTop20" placeholder="Please input" />
                </div>
                <div class="body_name ">
                    <div class="body_name_title mTop30">Подробное описание</div>
                    <el-input v-model="textarea" class="body_name_textarea mTop20" :rows="2" type="textarea"
                        placeholder="Please input" style="height: 160px;" />
                </div>
                <div>
                    <div class="body_name_title mTop30">Загрузить фото</div>
                    <el-upload class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
                <div class="mTop60 body_note c99">
                    Примечание: * Для обязательного заполнения
                </div>
                <div class="body_submit cFF center mTop20">
                    Представлено
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" name="cart" setup>
import { ref, reactive } from "vue";
const name = ref('')
const select_value = ref('')
const textarea = ref('')
const imageUrl = ref('')

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
</script>
<script lang="ts">
import Header from '@/components/Header/Header.vue';//引入的头部的主键

export default {
    name: 'Login',
    components: {
        Header,
    }
}

</script>

<style lang="less" scoped>
//select的高度
::v-deep .el-select--large .el-select__wrapper {
    min-height: 48px;
}

::v-deep .el-textarea__inner {
    height: 160px !important;
}

.main {
    background: #F6F6F6;
    padding-top: 16px;

    .body {
        width: 1320px;
        height: 1065px;
        border-radius: 16px;
        padding: 20px 40px 60px 40px;
        background-color: #FFFFFF;
        margin: 0 auto;

        &_title {
            font-family: PingFang SC;
            font-size: 24px;
            font-weight: 400;
            line-height: 24px;
            padding-bottom: 12px;
            border-bottom: 1px solid #EEEEEE;
        }

        &_name {

            &_title {
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: 400;
                line-height: 16px;
            }

            &_select {
                width: 400px;
                border-radius: 8px;
            }

            &_input {
                width: 580px;
                height: 48px;
                border-radius: 8px;
            }

            &_textarea {
                width: 560px;
                height: 160px;
                border-radius: 8px;
            }
        }

        &_note {
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
        }

        &_submit {
            width: 150px;
            height: 48px;
            border-radius: 8px;
            background: #0070E9;
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 400;
            line-height: 16px;
        }
    }


    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 88px;
        height: 88px;
        text-align: center;
        border: 1px dashed #EEEEEE;
        margin-top: 20px;
    }
}
</style>
